<template>
	<view>
		<view class='sign'>      
		    <view class='header bg-color'>
		       <view class='headerCon acea-row row-between-wrapper'>
		          <view class='left acea-row row-between-wrapper'>
		             <view class='pictrue'><image :src='userInfo.avatar'></image></view>
		             <view class='text'>
		                 <view class='line1'>{{userInfo.nickname}}</view>
		                 <view class='integral acea-row'><text>积分: {{userInfo.integral}}</text></view>
		             </view>
		          </view>
		          <navigator class='right acea-row row-middle' hover-class='none' url='/pages/users/user_sgin_list/index'>
		             <view class='iconfont icon-caidan'></view>
		             <view>明细</view>
		          </navigator>
		       </view>
		   </view>
		   <view class='wrapper'>
		      <view class='list acea-row row-between-wrapper'>
		         <view class='item' v-for="(item,index) in signSystemList" :key="index">
		            <view :class='(index+1) == signSystemList.length ? "rewardTxt" : ""'>{{item.day}}</view>
		            <view class='venus' :class="(index + 1 === signSystemList.length ? 'reward' : '') + ' ' +(sign_index >= index + 1 ? 'venusSelect' : '')"></view>
		            <view class='num' :class='item.is_sgin ? "on" : ""'>+{{item.sign_num}}</view>
		         </view>
		      </view>
		      <button class='but bg-color on' v-if="userInfo.is_day_sgin">已签到</button>
		      <form @submit="goSign" report-submit='true' v-else>
		        <button class='but bg-color' formType="submit">立即签到</button>
		      </form>
		      <view class='lock'></view>
		   </view>
		   <view class='wrapper wrapper2'>
		      <view class='tip'>已累计签到</view>
		      <view class='list2 acea-row row-center row-bottom'>
		         <view class='item'>{{signCount[0] || 0}}</view>
		         <view class='item'>{{signCount[1] || 0}}</view>
		         <view class='item'>{{signCount[2] || 0}}</view>
		         <view class='item'>{{signCount[3] || 0}}</view>
		         <view class='data'>天</view>
		      </view>
		      <view class='tip2'>据说连续签到第{{day}}天可获得超额积分，一定要坚持签到哦~~~</view>
		      <view class='list3'>
		         <view class='item acea-row' v-for="(item,index) in signList" :key="index">
		            <view>
		               <view class='name line1'>{{item.title}}</view>
		               <view class='data'>{{item.add_time}}</view>
		            </view>
		            <view class='num font-color'>+{{item.number}}</view>
		         </view>
		         <view class='loading' @click='goSignList' v-if="signList.length >= 3">点击加载更多<text class='iconfont icon-xiangyou'></text></view>
		      </view>
		   </view>
		   <view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
		      <view class='signTipLight loadingpic'></view>
		      <view class='signTipCon'>
		        <view class='state'>签到成功</view>
		        <view class='integral'>获得{{integral}}积分</view>
		        <view class='signTipBnt' @click='close'>好的</view>
		      </view>
		   </view>
		   <view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
		</view>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	import { toLogin } from '@/libs/login.js';
	 import { mapGetters } from "vuex";
	 import { postSignUser, getSignConfig, getSignList, setSignIntegral} from '@/api/user.js';
	 import { setFormId } from '@/api/api.js';
	 // #ifdef MP
	 import authorize from '@/components/Authorize';
	 // #endif
	 export default {
		 components: {
		 	// #ifdef MP
		 	authorize
		 	// #endif
		 },
	 	data() {
	 		return {
				active:false,
				    userInfo:{},
				    signCount:[],
				    signSystemList:[],
				    signList:[],
				    integral:0,
					isAuto: false, //没有授权的不会自动授权
					isShowAuth: false, //是否隐藏授权
					day:0,
					sign_index:0
	 		};
	 	},
	 	computed: mapGetters(['isLogin']),
	 	onLoad(){
	 		if(this.isLogin){
	 			this.getUserInfo();
	 			this.getSignSysteam();
	 			this.getSignList();
	 		}else{
	 			// #ifdef H5 || APP-PLUS
	 			toLogin();
	 			// #endif 
	 			// #ifdef MP
	 			this.isAuto = true;
	 			this.$set(this,'isShowAuth',true)
	 			// #endif
	 		}
	 	},
	 	methods: {
	 		 /**
	 		   * 授权回调
	 		  */
	 		  onLoadFun:function(){
	 		    this.getUserInfo();
	 		    this.getSignSysteam();
	 		    this.getSignList();
	 		  },
			 // 授权关闭
			 authColse:function(e){
			 	this.isShowAuth = e
			 },
			  /**
			     * 获取签到配置
			    */
			    getSignSysteam:function(){
			      let that=this;
			      getSignConfig().then(res=>{
					  that.$set(that,'signSystemList',res.data);
					  that.day = that.Rp(res.data.length);
			      })
			    },
			  
			    /**
			     * 去签到记录页面
			     * 
			    */
			    goSignList:function(){
			      return this.$util.Tips('/pages/users/user_sgin_list/index');
			    },
			    /**
			     * 获取用户信息
			    */
			    getUserInfo:function(){
			      let that=this;
			      postSignUser({ sign: 1 }).then(res=>{
			        res.data.integral = parseInt(res.data.integral);
			        let sum_sgin_day = res.data.sum_sgin_day;
					that.$set(that,'userInfo',res.data);
					that.signCount = that.PrefixInteger(sum_sgin_day, 4);
					that.sign_index = res.data.sign_num;
			      });
			    },
			  
			    /**
			     * 获取签到列表
			     * 
			    */
			    getSignList:function(){
			      let that=this;
			      getSignList({page:1,limit:3}).then(res=>{
					  that.$set(that,'signList',res.data);
			      })
			    },
			    /**
			     * 数字转中文
			     * 
			    */
			    Rp: function (n) {
			      let cnum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
			      let s = '';
			      n = '' + n; // 数字转为字符串
			      for (let i = 0; i < n.length; i++) {
			        s += cnum[parseInt(n.charAt(i))];
			      }
			      return s;
			    },
			    /**
			     * 数字分割为数组
			     * @param int num 需要分割的数字
			     * @param int length 需要分割为n位数组
			    */
			    PrefixInteger: function (num, length) {
			      return (Array(length).join('0') + num).slice(-length).split('');
			    },
			  
			    /**
			     * 用户签到
			    */
			    goSign:function(e){
			      let that = this, sum_sgin_day = that.userInfo.sum_sgin_day;
			      if (that.userInfo.is_day_sgin) return this.$util.Tips({title:'您今日已签到!'});
			      setSignIntegral().then(res=>{
					  that.active = true;
					  that.integral = res.data.integral;
					  that.sign_index = (that.sign_index + 1) > that.signSystemList.length ? 1 : that.sign_index + 1;
					  that.signCount = that.PrefixInteger(sum_sgin_day + 1, 4);
					  that.$set(that.userInfo,'is_day_sgin',true);
					  that.$set(that.userInfo,'integral',that.$util.$h.Add(that.userInfo.integral, res.data.integral));
			        that.getSignList();
			      }).catch(err=>{
			        return this.$util.Tips({title:err})
			      });
			    },
			    /**
			     * 关闭签到提示
			    */
			    close:function(){
				   this.active = false;
			    }
	 	}
	 }
</script>

<style scoped lang="scss">
	.sign .header{width:100%;height:310rpx;}
	.sign .header .headerCon{padding:0 0 0 30rpx;height:234rpx;}
	.sign .header .headerCon .left{width:530rpx;font-size:32rpx;color:#fff;font-weight:bold;}
	.sign .header .headerCon .left .integral text{font-size:24rpx;margin-top:19rpx;background-color:#ff9000;text-align:center;border-radius:6rpx;font-weight:normal;padding:4rpx 15rpx;}
	.sign .header .headerCon .text{width:410rpx;}
	.sign .header .headerCon .left .pictrue{width:100rpx;height:100rpx;border-radius:50%;border:4rpx solid #ecddbc;} 
	.sign .header .headerCon .left .pictrue image{width:100%;height:100%;border-radius:50%;}
	.sign .header .headerCon .right{width:142rpx;height:66rpx;background-color:#fff;border-radius:50rpx 0 0 50rpx;font-size:24rpx;color:#ff9000;}
	.sign .header .headerCon .right .iconfont{font-size:33rpx;padding:0 10rpx 0 30rpx;margin-top:5rpx;}
	.sign .wrapper{background-color:#fff;margin:-80rpx 20rpx 0 20rpx;border-radius:15rpx;padding-bottom:80rpx;position:relative;}
	.sign .wrapper .list{padding:0 30rpx;height:240rpx;}
	.sign .wrapper .list .item{font-size:22rpx;color:#8a8886;text-align:center;}
	.sign .wrapper .list .item .rewardTxt{width:74rpx;height:32rpx;background-color:#f4b409;border-radius:16rpx;font-size:20rpx;color:#a57d3f;line-height:32rpx;}
	.sign .wrapper .list .item .num{font-size:30rpx;color:#999;}
	.sign .wrapper .list .item .num.on{color:#ff9000;}
	.sign .wrapper .list .item .venus{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:56rpx;height:56rpx;margin:10rpx 0;}
	.sign .wrapper .list .item .venus.venusSelect{background-image:url('');}
	.sign .wrapper .list .item .venus.reward{background-image:url('');width:75rpx;height:56rpx;}
	.sign .wrapper .but{width:400rpx;height:76rpx;font-size:30rpx;line-height:76rpx;color:#fff;border-radius:50rpx;text-align:center;margin:0 auto;}
	.sign .wrapper .but.on{background-color: #999 !important;}
	.sign .wrapper .lock{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:558rpx;height:68rpx;position:absolute;left:50%;transform: translateX(-50%);bottom:-42rpx;z-index:9;}
	.sign .wrapper2{margin-top:15rpx;padding:73rpx 0 0 0;}
	.sign .wrapper2 .tip{font-size:30rpx;color:#666;text-align:center;}
	.sign .wrapper2 .list2{margin:45rpx 0 49rpx 0;}
	.sign .wrapper2 .list2 .item{width:80rpx;height:116rpx;background-repeat:no-repeat;background-size:100% 100%;color:#fff;font-size:72rpx;text-align:center;line-height:116rpx;margin-right:19rpx;background-image:url('');}
	.sign .wrapper2 .list2 .data{font-size:30rpx;color:#232323;}
	.sign .wrapper2 .tip2{font-size:30rpx;color:#999999;padding:0 55rpx;text-align:center;line-height:1.5;}
	.sign .list3{margin:45rpx 37rpx 0 37rpx;border-top:1px dashed #eee;}
	.sign .list3 .item{align-items:center;justify-content:space-between;border-bottom:1px solid #eee;height:130rpx;}
	.sign .list3 .item .name{color:#232323;font-size:30rpx;width:400rpx;}
	.sign .list3 .item .data{font-size:24rpx;color:#bbbbbb;margin-top:9rpx;}
	.sign .list3 .item .num{font-size:36rpx;font-family: 'Guildford Pro';}
	.sign .list3 .loading{font-size:26rpx;color:#282828;height:97rpx;line-height:97rpx;text-align:center;}
	.sign .list3 .loading .iconfont{font-size:25rpx;color:#212121;vertical-align:2rpx;margin-left:10rpx;}
	.sign .signTip{width:644rpx;height:645rpx;position:fixed;top:50%;left:50%;margin-left:-322rpx;margin-top:-322.5rpx;z-index:99;text-align:center;transition:all 0.3s ease-in-out 0s;opacity:0;transform: scale(0);}
	.sign .signTip .signTipLight{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:100%;height:100%;}
	.sign .signTip.on{opacity:1;transform: scale(1);}
	.sign .signTip .signTipCon{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:420rpx;height:420rpx;margin-top:-700rpx;position:relative;}
	.sign .signTip .signTipCon .state{font-size:34rpx;color:#fff;margin-top:150rpx;}
	.sign .signTip .signTipCon .integral{font-size:30rpx;color:rgba(255,255,255,0.6);margin-top:9rpx;}
	.sign .signTip .signTipCon .signTipBnt{font-size:30rpx;color:#eb4331;width:260rpx;height:76rpx;background-color:#f8d168;border-radius:38rpx;line-height:76rpx;margin:48rpx auto 0 auto;}
</style>